<template>
  <div class="system-customer">
    <xr-header />

    <div class="customer-content">
      <div class="system-view-nav">
        <Tree
          :data="categoryData"
          expand="true"
          default-expand-all="true"
          @on-select-change="refreshTask"
        ></Tree>
      </div>

      <div class="system-view-content">
        <div class="option-bar">
          <el-row type="flex" justify="start" class="left-pad">
            <el-form
              :inline="true"
              :model="queryForm"
              class="demo-form-inline"
              label-width="80px"
              inline
              size="mini"
            >
              <el-form-item label="流程名称">
                <el-input v-model="queryForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="流程别名">
                <el-input v-model="queryForm.modelKey" clearable></el-input>
              </el-form-item>
              <el-form-item label="节点名称">
                <el-input v-model="queryForm.taskKey" clearable></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-select v-model="queryForm.status" clearable>
                  <el-option
                    v-for="item in statusList"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" @click="openModelDialog" size="mini">
                <Icon type="ios-add" />
                添加
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                @click="openModelDiffDialog"
                size="mini"
              >
                <Icon type="icon-loading" />
                模型对比
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                @click="openModelUploadDialog"
                size="mini"
              >
                <Icon type="ios-cloud-upload" />
                模型上传
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <data-source
                :value="multipleSelection"
                tableName="A1_DE_MODEL"
                size="mini"
              ></data-source>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="cyan"
                size="mini"
                :disabled="multiple"
                @click="handleEs"
                >同步到ES
              </el-button>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 10px" type="flex" justify="start">
          </el-row>
        </div>
        <el-row class="margin:30px;">
          <el-col>
            <el-table
              class="n-table--border"
              stripe
              highlight-current-row
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" fixed width="55">
              </el-table-column>
              <el-table-column
                label="序号"
                type="index"
                width="50"
                fixed
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (queryForm.page - 1) * queryForm.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" width="180">
              </el-table-column>
              <el-table-column prop="modelKey" label="流程别名">
              </el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-tag
                    v-if="scope.row.defId == null || scope.row.defId == ''"
                    type="danger"
                    class="tag"
                    >未发布</el-tag
                  >
                  <el-tag v-else type="success" class="tag">已发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="version" label="版本号"> </el-table-column>
              <el-table-column label="操作" width="350" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="locationUrl(scope.row.id)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="publishModel(scope.row.id)"
                    size="small"
                    >发布</el-button
                  >
                  <el-button
                    type="text"
                    @click="viewImage(scope.row.id)"
                    size="small"
                    >查看流程</el-button
                  >
                  <el-button
                    v-if="scope.row.defId != null && scope.row.defId != ''"
                    type="text"
                    @click="viewModel(scope.row.id, scope.row.modelKey)"
                    size="small"
                    >自动化测试
                  </el-button>
                  <el-dropdown
                    @command="handleCommand"
                    type="primary"
                    size="small"
                  >
                    <span
                      class="
                        el-dropdown-link
                        el-button
                        el-button--text
                        el-button--small
                      "
                    >
                      更多功能<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'versionManager',
                        }"
                        >版本管理
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'getNodeInfo',
                        }"
                        >节点信息导出
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'copy',
                        }"
                        >复制模型
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'nodeAtom',
                        }"
                      >
                        <el-popconfirm
                          title="需要拆解当前模型的所有版本吗？"
                          cancelButtonText="否"
                          confirmButtonText="是"
                          @onConfirm="nodeAtom(scope.row.id, true)"
                          @onCancel="nodeAtom(scope.row.id, false)"
                        >
                          <span slot="reference">流程拆解</span>
                        </el-popconfirm>
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'delete',
                        }"
                      >
                        删除
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'BusinessFormSettings',
                        }"
                      >
                        业务表单配置
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'user',
                        }"
                        >全局预览插件
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'clearCache',
                        }"
                        >清空缓存
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'viewVar',
                        }"
                      >
                        决策变量
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'exportModel',
                        }"
                      >
                        导出
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'busModel',
                        }"
                      >
                        业务设置
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'urgingModel',
                        }"
                      >
                        催办
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'expireModel',
                        }"
                      >
                        到期提醒
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'skipModel',
                        }"
                      >
                        自动跳过设置
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'backModel',
                        }"
                      >
                        退回线设置
                      </el-dropdown-item>
                      <el-dropdown-item
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'sequenceModel',
                        }"
                        >连线按钮
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.active == null || scope.row.active == '1'
                        "
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'suspendProcessDefinition',
                        }"
                      >
                        挂起流程
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-else
                        :command="{
                          id: scope.row.id,
                          modelKey: scope.row.modelKey,
                          flag: 'activateProcessDefinition',
                        }"
                      >
                        激活流程
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <Modal
      :mask-closable="false"
      v-model="modelerModal"
      fullscreen
      title="杰狮BPM流程设计器"
      @on-cancel="cancelModel"
      :transfer="false"
    >
      <iframe
        width="100%"
        height="100%"
        style="min-height: 650px"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        id="iframe"
        :src="modelerSrc"
      ></iframe>
      <div slot="footer"></div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="viewImageModeler"
      fullscreen
      title="流程图"
      :transfer="false"
    >
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        id="iframe2"
        :src="viewImageModelerTmpSrc"
      ></iframe>

      <div slot="footer"></div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="code"
      fullscreen
      title="决策变量"
      :transfer="false"
    >
      <el-alert
        type="warning"
        title="如果连线上配置有条件，则源节点完成的时候，必须传递这些变量。除非使用了杰狮BPM中可选路径功能。"
        style="margin-top: 10px; margin-bottom: 10px"
      ></el-alert>
      <div v-html="varHtml"></div>
      <div slot="footer"></div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="uploadModal"
      title="模型上传"
      @on-cancel="handleResetForm"
      :transfer="false"
    >
      <Form
        :model="uploadForm"
        :label-width="80"
        :rules="uploadFormRuleValidate"
        ref="uploadForm"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="uploadForm.name"></Input>
        </FormItem>
        <FormItem label="别名" prop="modelKey">
          <Input v-model="uploadForm.modelKey"></Input>
        </FormItem>

        <FormItem prop="groupName" label="分类">
          <treeselect
            v-model="uploadForm.groupName"
            :normalizer="normalizer"
            :multiple="false"
            @select="selectTree"
            @input="clearOnSelect"
            placeholder="请选择"
            :options="categoryData"
          />
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input
            v-model="uploadForm.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></Input>
        </FormItem>
        <FormItem label="上传">
          <template>
            <Upload
              type="drag"
              :on-success="handleupLoadSuccess"
              :default-file-list="uploadList"
              :action="baseUploadURL"
            >
              <div style="padding: 20px 0">
                <Icon
                  type="ios-cloud-upload"
                  size="52"
                  style="color: #3399ff"
                ></Icon>
                <p>单击或拖动文件上传</p>
              </div>
            </Upload>
          </template>
        </FormItem>

        <!--          <div slot="footer">-->
        <!--            <Button type="primary" @click="save('addForm')">确定</Button>-->
        <!--            <Button @click="handleResetForm('addForm')">取消</Button>-->
        <!--          </div>-->
      </Form>

      <div slot="footer">
        <Button type="primary" @click="save('addForm')">确定</Button>
        <Button @click="handleResetForm('addForm')">取消</Button>
      </div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="copyModal"
      title="复制模型"
      @on-cancel="handleCoypModelResetForm"
      :transfer="false"
    >
      <Form
        :model="copyForm"
        :label-width="80"
        :rules="copyFormRuleValidate"
        ref="copyForm"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="copyForm.name"></Input>
        </FormItem>
        <FormItem label="别名" prop="modelKey">
          <Input v-model="copyForm.modelKey"></Input>
        </FormItem>

        <FormItem prop="groupName" label="分类">
          <treeselect
            v-model="copyForm.groupName"
            :normalizer="normalizer"
            :multiple="false"
            @select="selectCopyFormTree"
            @input="clearCopyFormOnSelect"
            placeholder="请选择"
            :options="categoryData"
          />
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input
            v-model="copyForm.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></Input>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" @click="saveCopyForm">确定</Button>
        <Button @click="handleCoypModelResetForm('copyForm')">取消</Button>
      </div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="suspendProcessDefinitionModal"
      @on-cancel="handleSuspendProcessForm"
      title="模型挂起"
      :transfer="false"
    >
      <el-form
        ref="suspendProcessDefinitionForm"
        :model="suspendProcessDefinitionForm"
        label-width="180px"
      >
        <el-form-item label="是否挂起所有实例">
          <el-switch
            v-model="suspendProcessDefinitionForm.suspendProcess"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <Button type="primary" @click="suspendProcess('addForm')">确定</Button>
        <Button @click="handleSuspendProcessForm('addForm')">取消</Button>
      </div>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="activateProcessDefinitionModal"
      @on-cancel="handleActivateProcessForm"
      title="模型激活"
      :transfer="false"
    >
      <el-form
        ref="activateProcessDefinitionForm"
        :model="activateProcessDefinitionForm"
        label-width="180px"
      >
        <el-form-item label="是否激活所有实例">
          <el-switch
            v-model="activateProcessDefinitionForm.activate"
          ></el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <Button type="primary" @click="activateProcess('addForm')">确定</Button>
        <Button @click="handleActivateProcessForm('addForm')">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
    font-size: 14px !important;
  }
}
.option-bar {
  padding: 15px 20px;
}
.system-customer {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.customer-content {
  flex: 1;
  position: relative;
  display: flex;
  overflow: hidden;
}
.system-view-nav {
  min-width: 200px;
  background: #fff;
  margin-right: 10px;
  padding-top: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.system-view-content {
  flex: 1;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

// 菜单
.menu-item {
  color: #333;
  font-size: 13px;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  position: relative;
  .icon-close {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    display: none;
  }
}

.menu-item:hover,
.menu-item.is-select {
  background-color: #f6f8fa;
}

.menu-item:hover::before,
.menu-item.is-select::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background-color: #5383ed;
}
</style>

<script>
import {
  getTaskChartData,
  getBpmnModelCategory,
  getModelerJson,
  publishModel,
  getVar,
  uploadSaveModel,
  copyModel,
  deleteProcessDefinition,
  deleteProcessDefinitionEs,
  clearCacheByKey,
  suspendProcessModel,
  activateProcessModel,
  saveAtom,
  getNodeInfo,
} from "@/api/analy";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth"; // get token from cookie
import DataSource from "@/components/plug/DataSource";
import XrHeader from "@/components/XrHeader";
import { download } from "@/api/analy";

export default {
  name: "Task",
  components: {
    Treeselect,
    DataSource,
    XrHeader,
  },

  data() {
    var checkKey = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("别名不能为空"));
      }
      var PLACEHOLDER_REGEX = /\$\{([^}]*)\}/g;
      var SPACE_REGEX = /\s/;
      value = value.replace(PLACEHOLDER_REGEX, "$1");
      if (SPACE_REGEX.test(value)) {
        return callback(new Error("Key不能包含空格"));
      }
      var ID_REGEX = /^[a-z_][\w-.]*$/i;
      var QNAME_REGEX = /^([a-z][\w-.]*:)?[a-z_][\w-.]*$/i;

      if (!ID_REGEX.test(value)) {
        if (QNAME_REGEX.test(value)) {
          return callback(new Error("别名不能包含前缀."));
        }
        return callback(new Error("别名必须是一个有效的QName"));
      }
      return callback();
    };
    return {
      multipleSelection: [],
      multiple: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      uploadFormRuleValidate: {
        name: [{ required: true, message: "    ", trigger: "blur" }],
        groupName: [{ required: true, message: "    ", trigger: "blur" }],
        modelKey: [
          { required: true, message: "    ", trigger: "blur" },
          { validator: checkKey, trigger: "blur" },
        ],
      },
      copyFormRuleValidate: {
        name: [{ required: true, message: "    ", trigger: "blur" }],
        groupName: [{ required: true, message: "    ", trigger: "blur" }],
        modelKey: [
          { required: true, message: "    ", trigger: "blur" },
          { validator: checkKey, trigger: "blur" },
        ],
      },
      baseUploadURL:
        process.env.VUE_APP_BASE_BPM_API + "/a1bpmn/api/upload/model",
      uploadForm: {
        name: "",
        modelKey: "",
        id: "",
        description: "",
        typeId: null,
        groupName: null,
      },
      copyForm: {
        name: "",
        modelKey: "",
        id: "",
        description: "",
        typeId: null,
        groupName: null,
      },
      suspendProcessDefinitionForm: {
        suspendProcess: false,
      },
      activateProcessDefinitionForm: {
        activateProcess: false,
      },
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      code: false,
      varHtml: "",
      modelerModal: false,
      uploadModal: false,
      copyModal: false,
      suspendProcessDefinitionModal: false,
      activateProcessDefinitionModal: false,
      suspendProcessDefinitionKey: "",
      activateProcessDefinitionKey: "",
      viewImageModeler: false,
      chartData: {},
      baseURL: process.env.VUE_APP_BASE_BPM_API,
      modelerSrc: process.env.VUE_APP_BASE_BPM_API + "diagram/index.html",
      viewImageModelerSrc:
        process.env.VUE_APP_BASE_BPM_API + "view/def.html?&modelId=",
      viewImageModelerTmpSrc: "",
      shopName: [],
      statusList: [
        { label: "未发布", value: "0" },
        { label: "已发布", value: "1" },
      ],
      queryForm: {
        name: "",
        createTime: "",
        modelKey: "",
        taskKey: "",
        page: 1,
        limit: 10,
        pageSize: 10,

        status: "",
        whereSql: "",
        type: 5,
        typeKey: "",
      },
      categoryData: [],
      uploadList: [],
    };
  },
  mount() {
    this.getData();
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
  },
  created() {
    this.getData();
    var threshold = 160;
    var count = 1;
  },
  methods: {
    handleEs() {
      deleteProcessDefinitionEs(this.ids).then((response) => {
        if (response.code == 0) {
          this.$message({
            duration: 800,
            message: "同步成功",
            type: "success",
            customClass: "zZindex",
          });
        } else {
          this.$message({
            duration: "800",
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map((item) => item.modelKey);
      this.single = val.length !== 1;
      this.multiple = !val.length;
    },
    handleCommand(command) {
      switch (command.flag) {
        case "versionManager":
          this.versionManager(command.id, command.modelKey);
          break;
        case "viewVar":
          this.viewVar(command.id);
          break;
        case "exportModel":
          this.exportModel(command.id);
          break;
        case "getNodeInfo":
          this.getNodeInfo(command.id);
          break;
        case "busModel":
          this.busModel(command.id);
          break;
        case "urgingModel":
          this.urgingModel(command.id);
          break;
        case "expireModel":
          this.expireModel(command.id);
          break;
        case "sequenceModel":
          this.sequenceModel(command.id);
          break;
        case "suspendProcessDefinition":
          this.suspendProcessDefinition(command.modelKey);
          break;
        case "activateProcessDefinition":
          this.activateProcessDefinition(command.modelKey);
          break;
        case "user":
          this.getUser(command.id);
          break;
        case "clearCache":
          this.clearCache(command.modelKey);
          break;
        case "delete":
          this.deleteProcessDefinition(command.modelKey);
          break;
        case "skipModel":
          this.skipModel(command.id);
          break;
        case "backModel":
          this.backModel(command.id);
          break;
        case "BusinessFormSettings":
          this.businessFormSettings(command.id);
          break;
        case "nodeAtom":
          break;
        case "copy":
          this.copyMode(command.id);
          break;
        default:
          return;
      }
    },
    recursionWindow: function () {},
    handleResetForm: function () {
      this.uploadForm.name = "";
      this.uploadForm.modelKey = "";
      this.uploadForm.id = "";
      this.uploadForm.description = "";
      this.uploadForm.typeId = null;
      this.uploadForm.groupName = null;
      this.uploadList = [];
      this.uploadModal = false;
    },
    handleCoypModelResetForm: function () {
      this.copyForm.name = "";
      this.copyForm.modelKey = "";
      this.copyForm.id = "";
      this.copyForm.description = "";
      this.copyForm.typeId = null;
      this.copyForm.groupName = null;
      this.copyModal = false;
    },
    handleSuspendProcessForm: function () {
      this.suspendProcessDefinitionModal = false;
      this.suspendProcessDefinitionForm.suspendProcess = false;
    },
    handleActivateProcessForm: function () {
      this.activateProcessDefinitionModal = false;
      this.activateProcessDefinitionForm.activateProcess = false;
    },
    suspendProcess: function () {
      var suspendProcess = this.suspendProcessDefinitionKey;
      var suspendProcessFlag = this.suspendProcessDefinitionForm.suspendProcess;

      suspendProcessModel(suspendProcess, suspendProcessFlag).then(
        (response) => {
          if (response.success) {
            this.suspendProcessDefinitionModal = false;
            this.getModelerJsonAction();
            this.$message({
              duration: 800,
              message: response.message,
              type: "warning",
              customClass: "zZindex",
            });
          } else {
            this.$message({
              duration: 800,
              message: response.message,
              type: "warning",
              customClass: "zZindex",
            });
          }
        }
      );
    },
    activateProcess: function () {
      var suspendProcess = this.activateProcessDefinitionKey;
      var suspendProcessFlag =
        this.activateProcessDefinitionForm.activateProcess;

      activateProcessModel(suspendProcess, suspendProcessFlag).then(
        (response) => {
          if (response.success) {
            this.getModelerJsonAction();

            this.activateProcessDefinitionModal = false;
            this.$message({
              duration: 800,
              message: response.message,
              type: "warning",
              customClass: "zZindex",
            });
          } else {
            this.$message({
              duration: 800,
              message: response.message,
              type: "warning",
              customClass: "zZindex",
            });
          }
        }
      );
    },
    saveCopyForm() {
      this.$refs["copyForm"].validate((valid) => {
        if (valid) {
          var formData = this.copyForm;
          if (formData.id) {
            copyModel(this.copyForm).then((response) => {
              if (response.code == 0) {
                this.copyModal = false;
                this.handleCoypModelResetForm();
                this.locationEditUrl(response.data.id);
              } else {
                this.$message({
                  duration: 800,
                  message: response.msg,
                  type: "warning",
                  customClass: "zZindex",
                });
              }
            });
          } else {
            uploadSaveModel(formData).then((response) => {
              if (response.code == 0) {
                // 调用全局挂载的方法
                this.$store.dispatch("tagsView/delView", this.$route);
                // 返回上一步路由
                this.$router.go(-1);
              }
            });
          }
        } else {
          this.$message({
            duration: 800,
            message: "表单校验不通过",
            type: "warning",
            customClass: "zZindex",
          });

          return;
        }
      });
    },
    save: function () {
      this.$refs["uploadForm"].validate((valid) => {
        if (valid) {
          var formData = this.uploadForm;
          if (this.uploadList.length == 0) {
            this.$message({
              duration: 800,
              message: "模型文件必须上传",
              type: "warning",
              customClass: "zZindex",
            });
            return;
          }
          if (formData.id) {
            uploadSaveModel(this.uploadForm).then((response) => {
              if (response.code == 0) {
                this.uploadModal = false;
                this.handleResetForm();
                this.locationEditUrl(response.data.id);
              } else {
                this.$message({
                  duration: 800,
                  message: response.msg,
                  type: "warning",
                  customClass: "zZindex",
                });
              }
            });
          } else {
            uploadSaveModel(formData).then((response) => {
              if (response.code == 0) {
                // 调用全局挂载的方法
                this.$store.dispatch("tagsView/delView", this.$route);
                // 返回上一步路由
                this.$router.go(-1);
              }
            });
          }
        } else {
          this.$message({
            duration: 800,
            message: "表单校验不通过",
            type: "warning",
            customClass: "zZindex",
          });

          return;
        }
      });
    },
    handleupLoadSuccess(res, file) {
      file.url = res.data;
      this.uploadForm.id = res.id;
      this.uploadList = [];
      this.uploadList.push(file);
      this.uploadForm.photo = file.url;
    },

    //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.title,
        label: node.title,
        children: node.children,
      };
    },
    selectTree: function (node, instanceId) {
      this.uploadForm.typeId = node.id;
      this.uploadForm.groupName = node.title;
    },
    selectCopyFormTree: function (node, instanceId) {
      this.copyForm.typeId = node.id;
      this.copyForm.groupName = node.title;
    },

    clearOnSelect: function (node, instanceId) {
      if (!node) {
        this.uploadForm.typeId = null;
        this.uploadForm.groupName = null;
      }
    },
    clearCopyFormOnSelect: function (node, instanceId) {
      if (!node) {
        this.copyForm.typeId = null;
        this.copyForm.groupName = null;
      }
    },
    locationUrl: function (id) {
      if (id) {
        var url = this.baseURL + "/diagram/index.html";
        url =
          url +
          "?id=" +
          id +
          "&t=" +
          new Date().getTime() +
          "&messageId=" +
          getToken();
        this.modelerSrc = url;
      }
      this.modelerModal = true;
    },
    locationEditUrl: function (id) {
      if (id) {
        var url = this.baseURL + "/diagram/index.html";
        url =
          url +
          "?id=" +
          id +
          "&t=" +
          new Date().getTime() +
          "&edit=true" +
          "&messageId=" +
          getToken();
        this.modelerSrc = url;
      }
      this.modelerModal = true;
    },
    cancelModel: function () {
      this.getModelerJsonAction();
    },

    viewImage: function (id) {
      // console.log(id)
      // var url= this.baseURL + "/view/def.html?&modelId=" + id
      if (id) {
        console.log(this.baseURL);
        // var url = "http://192.168.0.163:8082/fastflow-admin/a1bpmn/api/runtime/hisInstance/v1/processDefinitionId?modelId="+id
        var url = "http://192.168.0.163:8082/fastflow-admin" + "/view/def.html?&modelId=" + id;
        this.viewImageModelerTmpSrc = url;
      }
      this.viewImageModeler = true;
    },
    exportModel: function (id) {
      if (id) {
        var url = this.baseURL + "/a1bpmn/api/model/export/" + id;
        window.location.href = url;
      }
    },
    getNodeInfo: function (id) {
      if (id) {
        getNodeInfo(id).then((response) => {
          download(response, "流程节点信息");
        });
      }
    },
    busModel: function (id) {
      if (id) {
        this.$router.push({
          name: "busModel",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    sequenceModel: function (id) {
      if (id) {
        this.$router.push({
          name: "sequenceModel_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    skipModel: function (id) {
      if (id) {
        this.$router.push({
          name: "skipModel_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    backModel: function (id) {
      if (id) {
        this.$router.push({
          name: "backModel_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },

    businessFormSettings: function (id) {
      if (id) {
        this.$router.push({
          name: "businessFormSettings_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    nodeAtom: function (id, isAll) {
      if (id) {
        saveAtom(id, { isAll: isAll }).then((res) => {
          if (res.code == 0) {
            this.$message({
              duration: 800,
              message: "拆解成功",
              type: "success",
              customClass: "zZindex",
            });
          } else {
            this.$message({
              duration: 800,
              message: response.msg,
              type: "warning",
              customClass: "zZindex",
            });
          }
        });
      }
    },
    suspendProcessDefinition: function (key) {
      if (key) {
        this.suspendProcessDefinitionModal = true;
        this.suspendProcessDefinitionKey = key;
      }
    },
    activateProcessDefinition: function (key) {
      if (key) {
        this.activateProcessDefinitionModal = true;
        this.activateProcessDefinitionKey = key;
      }
    },
    /**
     * 获取人员
     * @param key
     */
    getUser: function (id) {
      if (id) {
        this.$router.push({
          name: "preUser",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    /**
     * 清空缓存
     * @param id
     */
    clearCache: function (id) {
      if (id) {
        this.$confirm("确定要清空当前模型下面所有版本的缓存吗？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return clearCacheByKey(id);
          })
          .then(() => {
            this.msgSuccess("操作成功");
          });
      }
    },
    copyMode(id) {
      this.copyForm.id = id;
      this.copyModal = true;
    },
    /**
     * 删除模型
     * @param id
     */
    deleteProcessDefinition: function (id) {
      if (id) {
        var that = this;
        this.$confirm("确定要清空当前模型下面所有版本的模型吗？", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            deleteProcessDefinition(id).then((response) => {
              if (response.code == 0) {
                that.getModelerJsonAction();
              } else {
                that.$message({
                  duration: 800,
                  message: response.msg,
                  type: "warning",
                  customClass: "zZindex",
                });
              }
            });
            return;
          })
          .then(() => {});
      }
    },
    urgingModel: function (id) {
      //催办插件
      if (id) {
        this.$router.push({
          name: "urging_task_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    expireModel: function (id) {
      //到期提醒
      if (id) {
        this.$router.push({
          name: "expire_task_setting",
          query: { t: new Date().getTime(), id: id },
        });
      }
    },
    viewModel: function (id, modelKey) {
      if (id) {
        this.$router.push({
          name: "testBpm",
          query: { t: new Date().getTime(), id: id, modelKey: modelKey },
        });
      }
    },
    viewVar: function (id) {
      if (id) {
        var exist = [];
        getVar(id).then((response) => {
          var data = response.data;
          this.code = true;
          var html = "";
          if (data) {
            if (data.length > 0) {
              for (var i in data) {
                html += "<br/>";
                if (exist.indexOf(data[i].sequenceFlow.id) == -1) {
                  html += "源节点:" + data[i].flowNode.name;
                  html += "<br/>";
                  html += "连线:" + data[i].sequenceFlow.id;
                  html += "<br/>";
                  html +=
                    "原始表达式:" +
                    data[i].sequenceFlow.conditionExpression +
                    "";
                  html += "<br/>";
                  html += "表达式提取变量:";
                  html += "<br/>";
                  for (var j in data[i].nodeList) {
                    html += "<br/>";
                    html += data[i].nodeList[j].name;
                  }
                  exist.push(data[i].sequenceFlow.id);
                }
              }
            } else {
              html = "暂无变量";
            }
          } else {
            html = "暂无变量";
          }

          this.varHtml = html;
        });
      }
    },
    versionManager: function (id, modelKey) {
      this.$router.push({
        name: "versionManager",
        query: { t: new Date().getTime(), modelKey: modelKey },
      });
    },
    openModelDialog: function () {
      var url = this.baseURL;
      url =
        url +
        "/diagram/index.html" +
        "?t=" +
        new Date().getTime() +
        "&messageId=" +
        getToken();
      this.modelerSrc = url;
      this.modelerModal = true;
    },
    openModelDiffDialog: function () {
      this.modelerSrc = "http://diff.pangubpm.com/";
      this.modelerModal = true;
    },
    openModelUploadDialog: function () {
      this.uploadModal = true;
    },
    publishModel: function (id) {
      publishModel(id).then((response) => {
        if (response.code == 0) {
          this.$message({
            duration: 800,
            message: "发布成功",
            type: "success",
            customClass: "zZindex",
          });

          this.getModelerJsonAction();
        } else {
          this.$message({
            duration: 800,
            message: response.msg,
            type: "warning",
            customClass: "zZindex",
          });
        }
      });
    },
    queryFormCreateTime: function (e) {
      this.queryForm.createTime = e;
    },
    refreshTask: function (data) {
      if (data[0].parentId == "-1") {
        this.queryForm.typeKey = "";
        this.queryForm.type = 5;
      } else {
        this.queryForm.typeKey = data[0].id;
        this.queryForm.type = 1;
      }
      this.queryForm.createTime = "";
      this.queryDate = [];
      this.queryForm.whereSql = "";
      this.queryForm.page = 1;
      this.getModelerJsonAction();
      this.queryForm.type = 5;
    },
    queryMethod: function () {
      var name = this.queryForm.name;
      var whereSql = "";
      var createTime = this.queryForm.createTime;
      if (createTime) {
        if (createTime[0]) {
          whereSql =
            "  CREATE_TIME_  between '" +
            createTime[0] +
            "' and " +
            "'" +
            createTime[1] +
            "'";
        }
      }
      this.queryForm.whereSql = whereSql;
      getModelerJson(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = parseInt(response.count);
      });
    },
    getModelerJsonAction: function () {
      getModelerJson(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = parseInt(response.count);
      });
    },
    getData: function () {
      getBpmnModelCategory().then((response) => {
        this.categoryData = response.data;
      });
      this.getModelerJsonAction();
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getModelerJsonAction();
    },
    handleClick(val) {
      getTaskChartData({ seller_id: val }).then((response) => {
        this.chartData = response.data;
        this.sellerId = val;
        this.shopName = response.data.shopName;
        this.chartVisible = true;
      });
    },
    search() {
      this.queryForm.page = 1;
      this.queryForm.type = 2;
      this.queryForm.typeKey = "";
      this.queryMethod();
      this.queryForm.type = 5;
    },
    reset() {
      this.queryForm.typeKey = "";
      this.queryForm.status = "";
      this.queryForm.taskKey = "";
      this.queryForm.type = 5;
      this.queryForm.name = "";
      this.queryForm.modelKey = "";
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 6px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.input_w {
  width: 40% !important;
}

.left-pad {
  margin-left: -11px;
}

.task-card {
  margin-top: 10px;
}

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: auto;
  color: black;
  direction: ltr;
}

.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
</style>
<style lang="scss" scoped>
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48d1cc;
  border-color: #48d1cc;
  color: #ffffff;
}

.el-button--cyan {
  background-color: #20b2aa;
  border-color: #20b2aa;
  color: #ffffff;
}

/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

/* 拖拽列样式 */
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

.top-right-btn {
  position: relative;
  float: right;
}

.main-div {
  background-color: white !important;
}
</style>
